<template>
	<view class="page-content">
		<u-navbar title="翡圈" autoBack bgColor="#D9EDD4" fixed safeAreaInsetTop placeholder>
			<view class="navbar-right" slot="right">
				<u-icon size="25" color="#383838" @click="gonavigate('/pages/search/search')" name="search"></u-icon>
			</view>
		</u-navbar>

		<view class="container">
			<view class="top-navbar">
				<view class="title-recommend" :class="{'title-active':swiperIndex==1}" @click="changePage(1)">关注
				</view>
				<view class="title-recommend" :class="{'title-active':swiperIndex==2}" @click="changePage(2)">热门
				</view>
				<view class="title-recommend" :class="{'title-active':swiperIndex==3}" @click="changePage(3)">最新
				</view>
				<view class="title-recommend" :class="{'title-active':swiperIndex==4}" @click="changePage(4)">翡翠
				</view>
				<view class="title-recommend" :class="{'title-active':swiperIndex==5}" @click="changePage(5)">文玩珠宝
				</view>
			</view>

			<view class="center-hot">
				<view class="hot-title">
					<u-image width="auto" height="28" mode='heightFix'
						src="/static/images/friend/img_hot-title.png"></u-image>
				</view>

				<view class="hot-content">
					<view class="hotContent-item" v-for="(item,index) in hotList" :key="index">
						<view class="hotItem-left">
							<view class="hot-Id" :class="{'hot-one':index==0,'hot-two':index==1,'hot-three':index==2}">
								{{index+1}}.
							</view>
							<view class="item-name">
								{{item.hotText}}
								<view class="hot-recommend" v-if="item.isRecommend">
									<u-icon size="18" name="/static/images/friend/icon_hot-recommend.png"></u-icon>
								</view>
							</view>
						</view>

						<view class="hotItem-right">
							{{item.hotFlow}}
						</view>
					</view>
				</view>
			</view>

			<view class="bottom-comment">
				<!-- 列表为空 -->
				<view v-if="recommendList==''">
				    <view class="empty-box">
				        <u-empty icon="/static/images/hole.png" icon-size="150" mode="order" text-color="#038B00"></u-empty>
				        <navigator class="coreshop-btn" url="/pages/index/default/default" open-type="switchTab">随便逛逛</navigator>
				    </view>
				</view>
				
				<view v-else class="comment-item" v-for="(item,index) in recommendList" :key="index">
					<view class="comment-userTop">
						<view class="user">
							<u-avatar size="50" src='/static/images/avatar/avatar-ring.jpg'></u-avatar>
							<view class="userTop-info">
								<view class="user-name">{{item.user.userName}}</view>
								<view class="user-time">{{item.createdAt}}</view>
							</view>
						</view>

						<view class="userTop-focus">
							<text>关注</text>
						</view>
					</view>
					<view class="comment-center">
						<view class="center-text">{{item.summary}}</view>
						<view class="center-img" v-if='item.content'>
							<view v-for="(child,childIndex) in item.content" :key="childIndex"
								@click="preview(item,childIndex)">
								<u--image width="150" height="150" radius='13' :src="child.slice(1,child.indexOf(')'))"></u--image>
							</view>
						</view>
					</view>
					<view class="comment-bottom">
						<view class="good-left">
							<u-icon name="heart-fill" color="red" size="22" v-if="item.starred"></u-icon>
							<u-icon name="heart" size="22" color="#999" v-else></u-icon>
							<view class="text" v-if="item.starCount">{{item.starCount}}</view>
							<view class="text" v-else>点赞</view>
						</view>
						<view class="news-center" @click="show=true">
							<u-icon name="/static/images/friend/icon_friend-news.png"></u-icon>
							<view class="text" v-if="item.commentCount">{{item.commentCount}}</view>
							<view class="text" v-else>评论</view>
						</view>
						<view class="relay-right">
							<u-icon name="/static/images/friend/icon_friend-share.png"></u-icon>
							<view class="text">转发</view>
						</view>
					</view>
				</view>
				
				<!-- loadmore -->
				<view>
					<u-loadmore height="30" :status="status" :icon-type="iconType" :loadmoreText="loadText.loadmore"
						:loadingText='loadText.loading' :nomoreText='loadText.nomore' margin-top="0" @loadmore='' />
				</view>
			</view>

			<u-popup :show="show" @close="closePop" :round="20" closeOnClickOverlay>
				<view class="review-item">
					<view class="review-top">
						<view class="left-all">
							<u-avatar size="42" src="/static/images/avatar/avatar-ring.jpg"></u-avatar>
							<view class="left-center">
								<view class="top-nickName">我是空气</view>
								<view class="center-review">喜欢呢~那里购买？</view>
								<view class="btm-time">昨天 17：20 <span class="btm-reply">回复</span></view>
							</view>
						</view>
						<view class="right-like">
							<u-icon size="22" name="heart"></u-icon>
							<text class="like-count">28</text>
						</view>
					</view>

					<view class="review-reply">
						<view class="reply-top">
							<view class="reply-name">翡翠一姐</view>
							<view class="reply-time">5h前</view>
						</view>
						<view class="reply-btm">喜欢那个可以s我！</view>
					</view>
				</view>

				<view class="review-item">
					<view class="review-top">
						<view class="left-all">
							<u-avatar size="42" src="/static/images/avatar/avatar-ring.jpg"></u-avatar>
							<view class="left-center">
								<view class="top-nickName">我是空气</view>
								<view class="center-review">喜欢呢~那里购买？</view>
								<view class="btm-time">昨天 17：20 <span class="btm-reply">回复</span></view>
							</view>
						</view>
						<view class="right-like">
							<u-icon size="22" name="heart"></u-icon>
							<text class="like-count">28</text>
						</view>
					</view>

					<view class="review-reply">
						<view class="reply-top">
							<view class="reply-name">翡翠一姐</view>
							<view class="reply-time">5h前</view>
						</view>
						<view class="reply-btm">喜欢那个可以s我！</view>
					</view>
				</view>
			</u-popup>

			<view class="add-comment" @click="gonavigate('/pages/friend/publish/publish')">
				<u-icon name="plus" size="36" color="#fff"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 弹出层
				show: false,
				//loadmore组件状态
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉/点击加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				// 点击Index切换
				swiperIndex: 2,
				// 图片list
				list:[], 
				// 排行榜
				hotList: [{
						hotText: '好物种草',
						hotFlow: '1771w',
						isRecommend: false
					},
					{
						hotText: '行家带您赏高货',
						hotFlow: '180w',
						isRecommend: true
					},
					{
						hotText: '珠链的N种搭配',
						hotFlow: '101w',
						isRecommend: false
					},
					{
						hotText: '好物种草',
						hotFlow: '171w',
					},
					{
						hotText: '翡翠要有种好色',
						hotFlow: '71w',
					}
				],
				// 文章列表
				recommendList: [
					// {
					// 	avatarImage: '/static/images/avatar/avatar-ring.jpg',
					// 	nickName: '翠友8787001',
					// 	userTime: '昨天 17：20',
					// 	text: '答应几位翠友，要给我镯子拍个全家福，供大答应几位翠友，要给我镯子拍个全家福，供大家欣赏。今天差不多收罗齐整了，除了其中两个是朋友帮忙找的，其他全部是揭阳这里收的。万万和多多联手打造，小千价位也好，',
					// 	images: '/static/images/friend/shareB-1.png,/static/images/friend/shareB-2.png',
					// 	starred: false,
					// 	starCount: null,
					// 	commentCount: 10,
					// },
				],

			}
		},
		mounted() {
			uni.request({
				url: "http://localhost:3000/article/getAllArticlesByPage",
				data: {
					currentPage: 1,
					pageSize: 100,
					articleName: '',
					type: 0
				},
				success: (res) => {
					if (res?.data?.code == 200) {
						this.recommendList = res.data.data.rows;
						// 处理图片
						let re = /\([^\)]+\)/g;
						let picList,pic;
						// console.log(this.recommendList);
						for(let j=0;j<this.recommendList.length;j++){
							picList = this.recommendList[j].content;
							picList = picList.match(re)
							this.recommendList[j].content = picList;
							for(let i=0;i<this.recommendList[j].content.length;i++){
								pic = this.recommendList[j].content[i].slice(1,this.recommendList[j].content.indexOf(')'))
							}
						}
						
					} else {
						this.$u.toast(res?.data?.data?.msg);
					}
				},
				fail: (res) => {
					this.$u.toast(res?.data?.msg)
				}
			})
		},
		methods: {
			// 滑动页面
			changePage(swiperIndex) {
				this.swiperIndex = swiperIndex;
			},
			// 跳转页面
			gonavigate(pageUrl) {
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: pageUrl
				})
			},
			// 预览图片
			preview(item, currentIndex) {
				let imageList=[];
				let img;
				for(let i=0;i<item.content.length;i++){
					img =item.content[i].slice(1,item.content[i].indexOf(')'));
					imageList.push(img)
				}
				uni.previewImage({
					urls: imageList,
					current: currentIndex,
				});
			},
			// 关闭popup
			closePop() {
				this.show = false
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "friend.scss";
</style>